<template>
  <div class="login-box">
    <div class="top">
      <div class="separator-1"></div>
      <div class="option" :class="{ active: !isAdministrator }">
        <button type="button" @click="change1">用户登录</button>
      </div>
      <div class="separator-2"></div>
      <div class="option" :class="{ active: isAdministrator }">
        <button type="button" @click="change2">管理员登录</button>
      </div>
      <div class="separator-1"></div>
    </div>
    <el-form
      label-position="left"
      :rules="rules"
      label-width="80px"
      :model="account"
      ref="loginForm"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="account.username" name="username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password" >
        <el-input v-model="account.password" name="password" type="password"></el-input>
      </el-form-item>
      <router-link to="register">注册</router-link>
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <router-link to="findPassword">忘记密码</router-link>
      <br />
      <input type="button" value="登&nbsp;&nbsp;&nbsp;录" @click="submitForm" />
    </el-form>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref } from "vue";
import router from '@/router';
import store from '@/store';
import { LoginParams, UserService } from "@/utils/api/user";
import { ElMessage } from 'element-plus';

export default defineComponent({
  setup() {
    const account: Ref<LoginParams> = ref({
      username: "",
      password: "",
    });
    const isAdministrator = ref(false);
    //自定义表单验证
    const loginForm = ref(null);
    const submitForm = () => {
      let flag;
      (loginForm.value as any).validate((valid: boolean) => {
        flag = valid;
      });
      if (flag === true) {
        if (isAdministrator.value === false) {
           UserService.login1(account.value)
          .then((res) => {
            console.log(res);
            if (res.data.a == 8) {
              router.push('main');
              store.commit('login',{
                  isLogin: true,
                  isAdministrator: isAdministrator.value,
                  username: account.value.username,
                  password: account.value.password,
                });
            } else if (res.data.a == 7) {
              openError('密码错误！');
            } else if (res.data.a == 14) {
              openError('请输入手机号或者身份证号！');
            } else if (res.data.a == 6) {
              openError('手机号未注册，请先注册！');
            } else if (res.data.a == 6) {
              openError('手机号未注册，请先注册！');
            } else if (res.data.a == 10) {
              openError('身份证号未注册，请先注册！');
            } else {
              openError('登录出错，请联系管理员！');
            }
          })
          .catch((error) => {
            console.log(error);
          });
        } else {
          UserService.login2(account.value)
          .then((res) => {
            console.log(res.data);
            if (res.data.a === 8) {
              store.commit('login',{
                  isLogin: true,
                  isAdministrator: isAdministrator.value,
                  username: account.value.username,
                  password: account.value.password,
                });
              router.push('admin');  
            } else if (res.data.a == 15) {
              openError("管理员不存在");
            } else if (res.data.a ==7) {
              openError("密码错误");
            } else {
              openError("系统出错了");
            }
          })
          .catch((error) => {
            console.log(error);
          });
        }
      }
    };
    const checkUsername = (rule: any, value: any, callback: any) => {
      if (!value) {
        return callback(new Error("用户名不能为空"));
      }
      callback();
    };
    const checkPassword = (rule: any, value: any, callback: any) => {
      if (!value) {
        return callback(new Error("密码不能为空"));
      }
      callback();
    };
    const rules = {
      username: [{ validator: checkUsername, trigger: "change" }],
      password: [{ validator: checkPassword, trigger: "change" }],
    };

    //状态标志
    const change1 = () => {
     isAdministrator.value = false;
    };
    const change2 = () => {
      isAdministrator.value = true;
    };
    //错误提示
    const openError= (inf: string) => {
          ElMessage({
            showClose: true,
            message: inf,
            type: 'error',
            offset: 200,
          });
    };      
    return {
      account,
      isAdministrator,
      loginForm,
      submitForm,
      rules,
      change1,
      change2,
      openError,
    };
  },

});
</script>
<style lang="scss" scoped>
@import "@/assets/css/config.scss";
.login-box {
  width: 400px;
  padding: 20px 45px 50px 45px;
  background: white;
  border-radius: 10px;
  text-align: center;
}
div.top {
  margin-bottom: 50px;
  height: 50px;
  .separator-1 {
    display: inline-block;
    height: 100%;
    width: 10%;
    border-style: solid;
    border-width: 0 0 2px 0;
    border-color: $themeLightGray;
  }
  .separator-2 {
    display: inline-block;
    height: 100%;
    width: 14%;
    border-style: solid;
    border-width: 0 0 2px 0;
    border-color: $themeLightGray;
  }
  .option {
    vertical-align: top;
    display: inline-block;
    height: 100%;
    width: 33%;
    border-style: solid;
    border-width: 0 0 2px 0;
    border-color: $themeLightGray;
    button {
      height: 90%;
      font-size: 16px;
      width: 100%;
      border: none;
      background: inherit;
      cursor: pointer;
    }
  }
  .option.active {
    border-color: $themeRed;
    button {
      color: $themeRed;
    }
  }
}
.el-form-item {
  margin-left: 20px;
  margin-right: 20px;
}
:deep(.el-input__inner) {
  letter-spacing: 1px;
}
input[type="button"] {
  cursor: pointer;
  background: $themeRed;
  color: white;
  padding: 10px 0;
  width: 30%;
  margin-top: 30px;
  font-size: 18px;
  border: none;
  outline: none;
  border-radius: 3px;
}
a {
  color: black;
  font-size: 16px;
  text-decoration: none;
}
</style>
